<template>
	<view class="indexBox"
		:style="'background-image: url('+indexBgi+');'">
		<view class="indexTop">
			<u-transition :show="true" mode="fade" duration="1800">
				<view class="flex mlr30 mb50 flex-itemCenter flex-two">
					<view class="cf fs48 flex">
						<view class="nowrap" style="max-width: 360rpx;">{{(userInfo.userName?userInfo.userName :'未登录')}}
						</view>
						<view v-if="userInfo.userName">，欢迎您！</view>
					</view>
					<view @click="navTo('personalCenter')">
						<image style="width: 70rpx;height: 70rpx;border-radius: 50%;"
							:src="userInfo.headUrl ? userInfo.headUrl : avatarUrl">
						</image>
					</view>
				</view>
				<view class="flex mlr30 mb50 flex-itemCenter">
					<!-- <image class="wh40" src="../../static/iconNotice.png"></image> -->
					<u-notice-bar v-if="agent.total != 0"
						:text="userInfo.userName?userInfo.userName+'，您有'+agent.total+'条新任务，请尽快处理。':'暂未登录，请尽快登录'"
						color="#ffffff" bgColor="rgba(0,0,0,0)"></u-notice-bar>
				</view>
			</u-transition>
		</view>
		<view class="indexBody pt50 plr25 move" :style="'transform: translateY('+move.translateY+'rpx);'">
			<view class="bodyItem" v-for="(item,index) in tabBarList" :key="item.name"
				:style="'background-image: url('+item.bgSrc+');opacity:'+move.opacity+';'" @click="navTo(item.path)">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	import {indexBgi} from '../../pagesA/base64Img.js'
	export default {
		data() {
			return {
				indexBgi,
				move: {
					translateY: 100,
					opacity: 0
				},
				// 无头像
				avatarUrl: '../../static/personalPhoto.png',
				//用户信息
				userInfo: {},
				//获取待办总数
				agent: {
					pageType: 1,
					pageIndex: 1,
					pageSize: 10,
					total: 0,
				},
				tabBarList: [{
						name: '计划管控',
						bgSrc: require('../../static/programControl.png'),
						path: 'programControl',
					}, {
						name: '设备管理',
						bgSrc: require('../../static/equipmentControl.png'),
						path: 'equipmentControl',
					}, {
						name: '培训考试',
						bgSrc: require('../../static/test.png'),
						path: 'examTraining',
					},
					// {
					// 	name:'安全准入',
					// 	bgSrc:require('../../static/securityAccess.png'),
					// 	path:'securityAccess',
					// },
					{
						name: '隐患排查',
						bgSrc: require('../../static/investigate.png'),
						path: 'investigate',
					}, {
						name: '我的待办',
						bgSrc: require('../../static/TasksOk.png'),
						path: 'agent',
					},
				]
			}
		},
		onShow() {
			// 获取代办数据
			this.getBlocklogResultPageList()
			// 获取用户信息
			if (uni.getStorageSync('token')) {
				// 有token再判断有不有用户信息
				if (uni.getStorageSync('userInfo')) {
					//有用户信息，正常渲染
					const userInfo = uni.getStorageSync('userInfo');
					this.userInfo = userInfo
				} else {
					//没有用户信息
					this.request(this.$api.getBaseUserInfo, "GET").then((res) => {
						if (res.resultValue) { //如果token没有过期，请求成功
							this.userInfo = res.resultValue
							// 保存用户信息
							uni.setStorageSync('userInfo', this.userInfo)
						}
					})
				}
			}
		},
		mounted() {
			this.setnum()
		},
		methods: {
			// 3毫秒后列表向上移动
			setnum() {
				setTimeout(() => {
					this.move.translateY = 0
					this.move.opacity = 1
				}, 300)
			},
			navTo(path) {
				//待办和个人信息是tabbar页面
				if (path == 'agent' || path == 'personalCenter') {
					uni.switchTab({
						url: "../" + path + "/" + path
					})
				} else {
					uni.navigateTo({
						url: "../../pagesB/" + path + "/" + path
					})
				}
			},
			// 获取待办数据
			getBlocklogResultPageList() {
				let that = this
				that.request(that.$api.getBlocklogResultPageList, this.agent, 'GET').then((res) => {
					if (res.code == 200) {
						this.agent.total = res.resultValue.itemCount
					}
				})
			},
		}
	}
</script>

<style scoped>
	.indexBox {
		padding-top: calc(var(--status-bar-height) - 40rpx);
		box-sizing: border-box;
		background-size: 100% 1082rpx;
		background-repeat: no-repeat;
	}

	.indexTop {
		padding-top: 180rpx;
		box-sizing: border-box;
	}

	.move {
		translateY: 200rpx;
		transition: all 1.5s;
	}

	>>>.u-avatar__image--circle {
		box-sizing: border-box;
		border: 4rpx solid #90BBFA;
	}

	.indexBody {
		background-color: #FFFFFF;
		border-radius: 40rpx 40rpx 0 0;
		display: flex;
		justify-content: space-between;
		align-content: flex-start;
		flex-wrap: wrap;
	}

	.bodyItem {
		height: 252rpx;
		width: 342rpx;
		color: #FFFFFF;
		background-repeat: no-repeat;
		background-size: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		font-size: 36rpx;
		transition: all 1.5s;
	}

	>>>.u-popup__content {
		border-radius: 20rpx;
		overflow: hidden;
	}

	.popup {
		border-radius: 20rpx;
		overflow: hidden;
		font-size: 32rpx;
		width: 600rpx;
		box-sizing: border-box;
		padding: 60rpx 60rpx 30rpx 60rpx;
	}

	.btn {
		box-sizing: border-box;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		text-align: center;
		border-radius: 14rpx;
	}

	.but1 {
		border: 1px solid #3473F9;
		color: #3473F9;
		margin-right: 30rpx;
	}

	.but2 {
		background-color: #3473F9;
		color: #FFFFFF;
	}

	>>>.u-notice-bar,
	notice-bar {
		padding: 0 !important;
	}
</style>
